<template>
  <div class="page-content">
    <el-row>
      <el-col :span="18">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="事件ID">
            <el-input v-model="query.id" placeholder="事件ID" clearable/>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="query.name" placeholder="名称" clearable/>
          </el-form-item>
          <el-form-item label="终端">
            <el-select v-model="query.terminalCode" filterable remote reserve-keyword
                       placeholder="---请选择---"
                       :remote-method="(w)=>queryTerminalOptions(w,null,null,formOptions.terminal)"
                       :loading="loading">
              <el-option v-for="item in formOptions.terminal.data" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="getList">查询</el-button>
            <el-button type="info" plain @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="6">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item style="float: right">
            <el-button type="success" @click="handleEdit()">处理</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%;" @selection-change="handleSelection">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="事件ID" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="tran.terminalCode" label="终端"/>
      <el-table-column prop="startTime" label="时间"/>
      <el-table-column prop="confirmed" label="确认">
        <template #default="scope">
        {{scope.row.confirmed?'是':'否'}}
        </template>
      </el-table-column>
      <el-table-column prop="cleared" label="清除">
        <template #default="scope">
        {{scope.row.cleared?'是':'否'}}
        </template>
      </el-table-column>
      <el-table-column prop="additionalInfo" label="附加信息">
        <template #default="scope">
          <el-text type="danger">{{scope.row.additionalInfo}}</el-text>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="handleEdit(scope.row)">处理</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="height: 50px;">
    <pagination v-model:size="query.pageSize" v-model:page="query.pageNum" :total="total" @pagination="getList" />
    </div>
      <dwin ref="dialog" :width="1024" :url="'/view/alarm/edit.vue'" :title="'告警详情'" @onclose="handleClose"></dwin>
  </div>
</template>
<script>
import Dwin from "../../component/dwin.vue";
import Pagination from "../../component/pagination.vue";
import {list,remove} from '/http/alarm.js'
import {useDict,searchTable,tranTable} from '/http/options.js'
const {ElMessage,ElMessageBox} = ElementPlus;
export default {
  components: {Dwin,Pagination},
  setup() {
    const tableData = ref([]);
    const total = ref(1);
    const dialog = ref(null);
    const selectRows = ref([])
    const formOptions =ref({
      terminal:{data:[]}
    })
    const loading =ref(false)
    const model = {
      name:'',
      terminalCode:'',
      cleared:false,
      pageSize:100,
      pageNum:1
    }
    const query = reactive(Object.assign({},model))
    //const query = toRefs(react);
    const resetForm =()=>{
      Object.assign(query, model);
    }
    const getList=()=>{
      list(query).then(res=>{
        tableData.value = res.data.data;
        console.log(tableData.value)
        tranTable(tableData.value,{terminalCode:'terminal'});
        console.log(tableData.value)
        total.value = parseInt(res.data.total);
      })
    }
    const handleSelection = (val) => {
      selectRows.value = val
    }

    const handleEdit = (row) => {
      let rows = row==null?selectRows:ref([row]);
      beforeEdit(rows,()=>{
        dialog.value.open(rows.value[0]);
      })
    }

    const handleRemove = (row) => {
      let rows = row==null?selectRows:ref([row]);
      beforeRemove(rows,()=>{
        remove(rows.value.map((item) => item.code).join()).then(res=>{
          if(response(res)){
            getList();
          }
        })
      });
    }

    const handleClose = (refresh)=>{
      if(refresh){
        getList();
      }
    }

    //查询终端
    const queryTerminalOptions = (w,id,pid,options,callback)=>{
      loading.value = true
      searchTable('terminal',{w,id,pid:pid}).then(res=>{
        options.data = res.data;
        loading.value = false
        if(callback){
          callback(options.data);
        }
      })
    }

    getList();
    return {
      handleEdit, handleRemove, dialog, tableData, query, getList, resetForm, handleSelection, handleClose, total,loading,
      queryTerminalOptions,formOptions};
  }
}
</script>
<style scoped>

</style>